<template>
    <div>
        <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="商品" width="120" class="tab">
                <template slot-scope="scope">
                    <img :src="'img/'+scope.row.productImage" />
                    <p>{{scope.row.productName}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="salePrice" label="价格" width="120"></el-table-column>
            <el-table-column prop="num" label="数量">
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.num"
                        @change="handleChange(scope.row)"
                        :min="1"
                        label="描述文字"
                    />
                </template>
            </el-table-column>
            <el-table-column label="总价">
                <template slot-scope="scope">{{scope.row.num*scope.row.salePrice}}</template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <i class="el-icon-delete" @click="del(scope.row._id)"></i>
                </template>
            </el-table-column>
        </el-table>
        <div class="foot">
            <span>总价:{{allPrice}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: this.$store.state.shop,
        };
    },
    computed:{
        allPrice(){
            let sum=0
            this.list.forEach(item => {
                sum+=item.num*item.salePrice
            });
            return sum
        }
    },
    methods: {
        handleSelectionChange() {
            console.log(1);
        },
        del(id) {},
        handleChange(row) {
            //数量改变
            console.log(row);
            this.$store.commit("changeNum", row);

        },


    },
    mounted() {
        this.list = this.$store.state.shop;
        
    },
};
</script>

<style lang="scss">
img {
    width: 80%;
    height: 60%;
}
</style>